<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="rotate.title">缓存机</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
p{
	margin: 0;
}
.u-line{
	margin: 0 auto;
	width: 650px;
    height: 600px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 200px;
	width: 770px;
	float: right;
	margin-top: 110px;
}
.u-roadcon{
	position: relative;
	float: left;
}
.u-roadcon:after{
	content: '';
	display: block;
	clear: both;
}
.u-road:after{
	content: '';
	display: block;
	clear: both;
}
.u-track{
	position: absolute;
	height: 28px;
	width: 100%;
	left: 0;
	top: 85px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.u-outtrack{
	position: absolute;
	height: 52px;
	width: 28px;
	left: 550px;
	top: 33px;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
}
.u-boxcon {
	position: relative;
	float: left;
	width: 68px;
	height: 68px;
	margin: 65px 120px 65px 0;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
}
.u-cache{
	position: absolute;
	left: 170px;
	top: -35px;
	width: 68px;
	height: 68px;
	background: #eef2f7;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
}
.u-cache p{
	margin: 0;
	text-align: center;
	font-size: 10px;
	margin-top: 4px;
}
.u-hand{
	position: absolute;
	width: 24px;
	height: 24px;
	top: -10px;
	left: -10px;
	border-radius: 50%; 
	background: #9acfe1;
	border: 1px solid #eee;
	z-index: -1;
}
.u-hand:after{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	margin-top: 6px;
	border-radius: 6px; 
	background: #66bfdd;
}
.u-handbar{
	position: relative;
	float: left;
	width: 6px;
	height: 6px;
	margin-top: 31px;
	margin-left: 31px;
	border-radius: 4px; 
	background: #66bfdd;
	opacity: 0;
}
.u-blank{
	position: absolute;
	left: 320px;
	top: 20px;
	width: 190px;
	height: 150px;
	background: #fff;
	border: 1px solid #cecece;
	z-index: 18;
}
.u-blank .u-littlebox{
	position: absolute;
	width: 68px;
	height: 18px;
	background: #b9b9b9;
	border-radius: 4px;
	border: 1px solid #29abe2;
}
.u-blank p{
	position: absolute;
	top: -16px;
	font-size: 12px;
	width: 100%;
	left: 0;
	line-height: 16px;
	text-align: center;
}
.u-blank .u-littlebox:nth-child(1){
	left: -44px;
	top: -40px;
}
.u-blank .u-littlebox:nth-child(2){
	left: 15px;
	top: -80px;
}
.u-blank .u-littlebox:nth-child(3){
	right: 15px;
	top: -80px;
}
.u-blank .u-littlebox:nth-child(4){
	right: -44px;
	top: -40px;
}
.turncon{
	position: absolute;
	left: 320px;
	top: 20px;
	width: 190px;
	height: 95px;
	overflow: hidden;
	z-index: 19;
}
.u-turnover{
	position: absolute;
	width: 48px;
	height: 48px;
	left: 70px;
	bottom: -19px;
	background: #bdcee2;
	border: 1px solid #29abe2;
	border-radius: 50%;
	z-index:12;
}
.u-boxbarcon{
	position: absolute;
	width: 160px;
	height: 160px;
	left: 15px;
	bottom: -75px;
}
.u-boxbar{
	position: absolute;
	left: 0;
	bottom: 75px;
	width: 158px;
	height: 6px;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index:-1;
}
.u-boxbar:nth-child(1){
	-webkit-transform: rotateZ(0deg);
}
.u-boxbar:nth-child(2){
	-webkit-transform: rotateZ(-30deg);
}
.u-boxbar:nth-child(3){
	-webkit-transform: rotateZ(-60deg);
}
.u-boxbar:nth-child(4){
	-webkit-transform: rotateZ(-90deg);
}
.u-boxbar:nth-child(5){
	-webkit-transform: rotateZ(-120deg);
}
.u-boxbar:nth-child(6){
	-webkit-transform: rotateZ(-150deg);
}
/*animations*/

.rotate{
	-webkit-animation: rotate 0.3s linear infinite;
}
@-webkit-keyframes rotate {
0%{
	-webkit-transform: rotateZ(0deg);
}
100%{
	-webkit-transform: rotateZ(30deg);
}
}
.moveright{
	-webkit-transform: translateZ(0);
	-webkit-animation: moverights 0.3s linear infinite;
	-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes moverights {
0%{
	-webkit-transform: translateX(0);
}
100%{
	-webkit-transform: translateX(190px);
}
}
.stop {
    animation-play-state: paused;
}
.u-adjust{
	position: absolute;
	left: 290px;
	width: 71px;
	height: 20px;
}
</style>
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="rotate.title">翻转机</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-infos">
	<h2 data-localize="rotate.info_title">状态区域</h2>
	<div class="u-errorlist">
		<h3 data-localize="yichang">异常一览：</h3>
		<div class="u-errorlistcon">
		</div>
	</div>
	<p class="status"><span data-localize="rotate.running">运行状态：</span><span class="u-cube t-status"></span></p>
</div>
<div class="t-con">
<div class="u-line">
	<div class="u-boxcon needleft u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
	<div class="u-road lineA">
		<div class="u-track"></div>
		<div class="u-boxcon needleft"><div class="u-box u-box1"></div></div>
		
		<div class="u-boxcon needleft u-turnbox stop"><div class="u-box u-box1"><p></p></div></div>
		<div class="turncon">
			<div class="u-turnover"></div>
			<div class="u-boxbarcon" id="rotatebox">
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
			</div>
		</div>
		<div class="u-blank">
			<div class="u-littlebox u-box2"><p></p></div>
			<div class="u-littlebox u-box3"><p></p></div>
			<div class="u-littlebox u-box4"><p></p></div>
			<div class="u-littlebox u-box5"><p></p></div>
		</div>
		<div class="u-boxcon needleft"><div class="u-box u-box6"></div></div>
		<div class="u-boxcon needleft"><div class="u-box u-box6"><p></p></div></div>
	</div>
	<div class="u-road opposite lineB">
		<div class="u-track"></div>
		<div class="u-boxcon needleft"><div class="u-box u-box1"></div></div>
		
		<div class="u-boxcon needleft u-turnbox stop"><div class="u-box u-box1"><p></p></div></div>
		<div class="turncon">
			<div class="u-turnover"></div>
			<div class="u-boxbarcon" id="rotatebox-b">
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
				<div class="u-boxbar"></div>
			</div>
		</div>
		<div class="u-blank">
			<div class="u-littlebox u-box2"><p></p></div>
			<div class="u-littlebox u-box3"><p></p></div>
			<div class="u-littlebox u-box4"><p></p></div>
			<div class="u-littlebox u-box5"><p></p></div>
		</div>
		<div class="u-boxcon needleft"><div class="u-box u-box6"></div></div>
		<div class="u-boxcon needleft"><div class="u-box u-box6"><p></p></div></div>
	</div>
</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lastData = null,
	si=null,
	isFirst = true;
var url = getUrl("rotate");
var request = new GetRequest();
var showval= request.type; 
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
if (request.line == "A") {
	$('.lineB').hide();
	$('.lineA').show();
}else if (request.line == "B") {
	$('.lineA').hide();
	$('.lineB').show();
} 
websocket.onerror = function () {
    $('.u-boxcon,.u-adjust,.u-boxbarcon').addClass('stop');
    $('.u-box4').addClass('stop');
};

websocket.onopen = function (event) {
    $('.u-boxcon,.u-adjust,.u-boxbarcon').removeClass('stop');
    $('.u-box4').removeClass('stop');
}
function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
                if (obj[i].stack_index == 1 || obj[i].stack_index == 6) {
                	$('.u-box'+obj[i].stack_index).parent().addClass('moveright');
                }
            }

       })(i); 
    }
}
function count(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
       	if (obj[i].silicon_id && obj[i].silicon_id != '0') {
            $('.u-box'+obj[i].stack_index).find('p').html(obj[i].silicon_id);    
            //console.log(obj[i].stack_index);
            if (obj[i].silicon_status == 1) {
            	switch (obj[i].stack_index) 
				{ 
				  case 1:
				  	$('.u-box1').addClass('backprinted2');
				  	break;
				  case 2:
				  	$('.u-box2').addClass('normal');
				  	break;
				  case 3:
				  	$('.u-box3').addClass('normal');
				  	break;
				  case 4:
				  	$('.u-box4').addClass('normal');
				  	break;
				  case 5:
				  	$('.u-box5').addClass('normal');
				  	break;
				  case 6:
				  	$('.u-box6').addClass('normal');
				  	break;
				  default:

				}
            }else if(obj[i].silicon_status == 0){
                switch (obj[i].stack_index) 
				{ 
				  case 1:
				  	$('.u-box1').addClass('backprinted2');
				  	break;
				  case 2:
				  	$('.u-box2').addClass('normal');
				  	break;
				  case 3:
				  	$('.u-box3').addClass('normal');
				  	break;
				  case 4:
				  	$('.u-box4').addClass('normal');
				  	break;
				  case 5:
				  	$('.u-box5').addClass('normal');
				  	break;
				  case 6:
				  	$('.u-box6').addClass('normal');
				  	break;
				  default:

				}
            }else{
                switch (obj[i].stack_index) 
				{ 
				  case 1:
				  	$('.u-box1').addClass('backprinted2');
				  	break;
				  case 2:
				  	$('.u-box2').css('background','#ddd9c3');
				  	break;
				  case 3:
				  	$('.u-box3').css('background','#ddd9c3');
				  	break;
				  case 4:
				  	$('.u-box4').css('background','#29abe2');
				  	break;
				  case 5:
				  	$('.u-box5').css('background','#29abe2');
				  	break;
				  case 6:
				  	$('.u-box6').addClass('normal');
				  	break;
				  default:

				}
            }
        }
       })(i); 
    }
}
websocket.onmessage = function (event) {
	$('.u-box5').show();
	$('#u-boxe').addClass('moveright');
    //$('.needleft').addClass('moveright');
	//$('.u-handbar').addClass('grow');
	
    si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    if (!lastData) {
    	lastData = si;
    }
    changeColor($('.t-status'),si.p2);
	if (si.isPause1 == 1) {
    	$('.u-boxbarcon').removeClass('rotate');
    }else if (si.isPause1 == 0) {
    	$('.u-boxbarcon').addClass('rotate');
    }
    if (isFirst) {
    	count(si.stack_list);
		isFirst = false;
    }
    errorRender();
    addanimate(si.stack_list);
    console.log(si);
    //$('.u-boxcon').addClass('moveright');
    lastData = si;
}

document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
	reset();
	$('.u-littlebox').css('background','#b9b9b9');
	count(si.stack_list);
    $('.needleft').removeClass('moveright');
}, false);
document.getElementById('rotatebox').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxbarcon').removeClass('rotate');
}, false);
document.getElementById('rotatebox-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxbarcon').removeClass('rotate');
}, false);
window.onbeforeunload = function(){
	websocket.close();
}    
</script>
</body>
</html>